<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
      charset="UTF-8"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="telephone=no" name="format-detection" />
    <title>信丰县南山寺·善行愿祈</title>
    <script src="js/vue.min.js"></script>
    <script src="js/html2canvas.min.js"></script>
    <script src="js/qrcode.min.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="css/style.css" />
    <link
      rel="stylesheet"
      href="https://cdn.suoluomei.com/common/js2.0/vant/v2.12/index.css"
    />
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/vant/v2.12/vant.min.js"></script>
    <script src="js/base.js"></script>
    <style>
      .xslistBox {
        margin-top: 0;
      }
      .xslist {
        padding-top: 1rem;
      }
      .to-share {
        position: absolute;
        top: 0;
        width: 0.2rem;
        bottom: 0;
        margin: auto;
        right: 0.2rem;
      }
    </style>
  </head>
  <body class="xsbody">
    <div class="loading fixed" style="display: none">
      <section>
        <div class="loader loader-20"></div>
      </section>
    </div>
    <div class="main backstage" id="app">
      <div class="fixedTitle">
        <div class="con">
          <img src="img/return.png" class="return" />
          <p>后台管理</p>
          <div @click="initShare" class="to-share">
            <img src="img/share-icon.jpg" alt="" />
          </div>
        </div>
      </div>
      <div class="touimg">
        <div class="topimg_search">
          <div class="search">
            <div class="con">
              <img src="img/search.png" />
              <input
                type="text"
                placeholder="请输入发愿人姓名"
                v-model="blessName"
              />
            </div>
            <span @click="search()">搜索</span>
          </div>
          <div class="search search1">
            <div class="search_share">
              <div class="con">
                <p v-show="forwardStatus==''">选择分享状态</p>
                <p v-show="forwardStatus=='0'">未分享</p>
                <p v-show="forwardStatus=='1'">已分享</p>
                <img src="img/you.png" />
              </div>
              <select v-model="forwardStatus" @change="select($event)">
                <option value="0">未分享</option>
                <option value="1">已分享</option>
              </select>
            </div>
            <div class="search_date">
              <div class="con" @click="show = true">
                <p v-show="date==''">选择时间</p>
                <p v-show="date!=''">{{date}}</p>
                <img src="img/you.png" />
              </div>
              <van-calendar
                allow-same-day="true"
                :min-date="minDate"
                v-model="show"
                type="range"
                @confirm="onConfirm"
              />
            </div>
            <span
              class="qingkong"
              @click="forwardStatus='';startDate='';endDate='';date='';blessName='';xslist=[];info();"
              >清空</span
            >
          </div>
        </div>
        <!-- <img src="img/xingshan/img1.png" class="fullImg"> -->
      </div>
      <div class="xslistBox">
        <div class="xslist">
          <ul>
            <li v-for="i in xslist" @click="godetail(i)">
              <div class="tit">
                <p>流水：{{i.orderNo}}</p>
                <p>
                  <span>{{i.createTime}}</span>
                </p>
              </div>
              <div>
                <p>愿：{{i.blessContent}}</p>
                <p>发愿人：{{i.blessName}}</p>
                <span class="okshare" v-show="i.forwardStatus==1">已分享</span>
                <span class="noshare" v-show="i.forwardStatus==0">未分享</span>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div
        class="fixed black xsdetail"
        :style="{'display':detailShow ?'flex' :'none'}"
        v-if="detailShow"
        v-if="detailShow"
      >
        <div class="box">
          <div class="con">
            <div class="xs_yuan">
              <div class="xs_yuan_xx">
                <img :src="detail.headPic" class="headimg" />
                <div class="nickname">
                  <p>发愿人：{{detail.blessName}}</p>
                  <p class="leiji">
                    <span>累计行善{{detail.blessDays}}天</span>
                  </p>
                </div>
                <div class="xs_yuan_jl">
                  <p class="gongde">善款<span>{{detail.money}}元</span></p>
                  <p class="gongde">
                    累计功德<span>{{detail.goodScore}}</span>
                  </p>
                </div>
              </div>
              <div class="info">{{detail.blessContent}}</div>
            </div>
            <div class="zhuchi">
              <div class="zhuchi_xx">
                <img src="img/si.jpg" class="headimg" />
                <p>谛静法师</p>
                <p>
                  <span>当家师</span>
                </p>
              </div>
              <div class="info">
                @{{detail.blessName}}善信菩萨吉祥🌹！赞叹善信菩萨恒持善行👍三宝兴隆、龙天加护！祝愿：三业清净，违缘消灭，善业增长，身心安乐、家庭幸福，事业圆满，合家康宁！福光常注照，诸方好运享安宁，常行胜因善缘，吉祥安康！🙏🙏🙏
              </div>
            </div>
            <p class="title gongde">
              本次善行收到的众缘赞叹<span>{{detail.helperNum}}</span>人
            </p>
            <div class="zantan" v-show="detailhelplist.records.length>0">
              <ul>
                <li v-for="(i,index) in detailhelplist.records">
                  <div class="tit">
                    <p>善信{{i.name}}为本次善行，众缘赞叹，共修功德。</p>
                  </div>
                  <div>
                    <p>
                      <span>{{i.time}}</span>
                    </p>
                    <!-- <p class="gongde">
                  功德<span>+10</span>
                </p> -->
                  </div>
                </li>
              </ul>
            </div>
            <p class="btn">
              <img
                src="img/btn1.png"
                class="xsbtn"
                @click="window.location.href='./index.html'"
              />
              <img src="img/btn.png" class="sharebtn" @click="share()" />
            </p>
          </div>
          <img src="img/close1.png" class="close" @click="detailClose()" />
        </div>
      </div>
      <div
        class="fixed poster"
        @click="clearPoster"
        style="display: none"
        :style="{'display':posterShow ?'block' :'none'}"
        v-if="posterShow"
      >
        <img
          src="./img/back.png"
          @click="clearPoster"
          class="back-icon"
          alt=""
        />
        <div class="img-box" v-show="!dataURL" v-loading="!dataURL">
          <img class="share-img" :src="shareImg" alt="" />
          <p class="time">{{dateInfo}}</p>
          <p class="bold-font">实时统计：</p>
          <p class="goodness">
            今日共有{{totalDetail.totalPeople}}名善行日行一善累计善款{{totalDetail.totalMoney}}元
          </p>
          <p class="tip-text">长按分享图片&nbsp;>>></p>
          <div id="qrcode"></div>
          <p class="tip-text" style="right: 0.12rem; left: auto">
            长按识别二维码
          </p>
        </div>
        <div class="img-box" v-show="dataURL">
          <img class="share-img" :src="dataURL" />
        </div>
      </div>

      <div
        class="fixed poster"
        style="display: none"
        :style="{'display':posterShows ?'block' :'none'}"
        v-if="posterShows"
      >
        <img
          src="./img/back.png"
          @click="clearPoster"
          class="back-icon"
          alt=""
        />
        <div class="img-box" v-show="!dataURL" v-loading="!dataURL">
          <img class="share-img" :src="shareImgs" alt="" />
          <p class="word font-style">
            随喜赞叹@{{detail.blessName}}
            善行愿祈，心灯常亮，众缘赞叹，共修功德。
          </p>
          <p class="font-style" style="margin-top: 0.15rem; width: 1.67rem">
            愿：{{blessContent}}
          </p>
          <p class="tip-text">长按分享图片&nbsp;>>></p>
          <div id="qrcode"></div>
          <p class="tip-text" style="right: 0.12rem; left: auto">
            长按识别二维码
          </p>
        </div>
        <div class="img-box" v-show="dataURL">
          <img class="share-img" :src="dataURL" />
        </div>
      </div>
    </div>

    <script src="font/shareImgs.js"></script>
    <script>
      var vm;
      $(function () {
        vm = new Vue({
          el: "#app",
          data() {
            return {
              posterShow: false,
              dataURL: "",
              shareImg: share2,
              shareImgs: share1,
              detailShow: false,
              xslist: [],
              show: false,
              date: "",
              minDate: new Date(2010 / 01 / 01),
              home: {},
              benzanpage: 1,
              benzanpagesize: 10,
              detail: "",
              detailhelplist: [],

              detailId: "",
              dateInfo: `${new Date().getFullYear()}年${
                new Date().getMonth() + 1
              }月${new Date().getDate()}日`,
              page: 1,
              pagesize: 10,
              forwardStatus: "",
              blessName: "",
              startDate: "",
              endDate: "",
              totalDetail: {},
              isscroll: true,
              shareShow: false,
              posterShows: false,
              blessContent: "",
            };
          },
          mounted() {
            let that = this;
            that.info();
            jQuery.get(api + "/app/goodMan/todayGoodList", (res) => {
              if (res.code == 200) {
                this.totalDetail = res.data;
              }
            });
            $(".xslist").scroll(function () {
              var scrollTop = $(this).scrollTop();
              var scrollHeight = $(".xslist ul").height();
              var windowHeight = $(this).height();
              console.log(scrollTop + windowHeight);
              console.log(scrollHeight);
              if (scrollTop + windowHeight + 10 >= scrollHeight) {
                console.log("加载更多");
                if (that.isscroll) {
                  that.isscroll = false;
                  that.page++;
                  that.info();
                }
              }
            });

            document.onreadystatechange = function () {
              console.log(document.readyState);
              if (document.readyState == "complete") {
                $(".loading").hide();
              }
            };
          },

          methods: {
            initShare() {
              this.posterShow = true;
              this.$nextTick(() => {
                let urls = window.location.host;
                let queryString = window.location.href.split("?")[1];
                let codeDom = document.getElementById("qrcode");
                let code = new QRCode(codeDom, {
                  text: `http://${urls}/share.html?recordId=${this.detailId}&share=1&${queryString}`, // 字符串
                  width: 70,
                  height: 70,
                });
                html2canvas(document.querySelector(".img-box"), {}).then(
                  (canvas) => {
                    this.dataURL = canvas.toDataURL("image/png");
                  }
                );
              });
            },
            share() {
              this.posterShows = true;
              this.detailShow = false;
              this.$nextTick(() => {
                let urls = window.location.host;
                let queryString = window.location.href.split("?")[1];
                let codeDom = document.getElementById("qrcode");
                let code = new QRCode(codeDom, {
                  text: `http://${urls}/share.html?recordId=${this.detailId}&${queryString}`, // 字符串
                  width: 70,
                  height: 70,
                });
                html2canvas(document.querySelector(".img-box"), {}).then(
                  (canvas) => {
                    this.dataURL = canvas.toDataURL("image/png");
                  }
                );
                jQuery.post(
                  api + "app/goodMan/adminForward",
                  { recordId: this.detailId },
                  (res) => {
                    this.xslist.find(item=>item.recordId === this.detailId).forwardStatus = 1
                  }
                );
              });
              // window.location.href='./share.html?recordId='+this.detailId;
              // share(this.detailId);
            },
            clearPoster() {
              this.dataURL = "";
              this.posterShow = false;
              this.posterShows = false;
            },
            search() {
              let that = this;
              that.page = 1;
              that.xslist = [];
              that.info();
            },
            formatDate(date) {
              return `${date.getFullYear()}/${
                date.getMonth() + 1
              }/${date.getDate()}`;
            },
            onConfirm(date) {
              console.log(date);
              const [start, end] = date;

              this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
              this.startDate = `${this.formatDate(start)}`;
              this.endDate = `${this.formatDate(end)}`;

              setTimeout(() => {
                this.show = false;

                this.xslist = [];
                this.info();
              }, 50);
              console.log(this.date, this.show);
            },
            godetail({ recordId, blessContent }) {
              this.blessContent = blessContent;
              // let userId = 1
              let that = this;
              that.detailId = recordId;
              var url =
                api +
                "/app/goodMan/recordDetail/" +
                userId +
                "/" +
                recordId +
                "/" +
                that.benzanpage +
                "/" +
                that.benzanpagesize;
              jQuery.get(url, function (res) {
                if (res.code == 200) {
                  that.detail = res.data;
                  that.detailhelplist = res.data.helpInfoList;
                  that.detailShow = true;
                }
              });
            },
            select(e) {
              this.xslist = [];
              this.info();
            },
            info() {
              let that = this;
              var url =
                api +
                "/app/goodMan/getAdminList/" +
                that.page +
                "/" +
                that.pagesize;
              jQuery.get(
                url,
                {
                  blessName: that.blessName,
                  forwardStatus: that.forwardStatus,
                  startDate: that.startDate,
                  endDate: that.endDate,
                },
                function (res) {
                  that.isscroll = true;
                  if (res.code == 200) {
                    that.xslist.push(...res.data.records);
                    setTimeout(() => {
                      var height =
                        $(window).height() -
                        $(".fixedTitle").outerHeight(true) -
                        $(".touimg").outerHeight(true) -
                        100;
                      $(".xslist").height(height);
                    }, 100);
                  }
                }
              );
            },
            detailClose() {
              this.detailShow = false;
            },
            // share(){
            //   jQuery.post(api + "app/goodMan/adminForward",{"recordId":that.detailId},function(res){
            //     if(res.code == 200){

            //     }
            //   })
            // },
          },
        });
      });
    </script>
  </body>
</html>
